<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2022-06-28 15:23:55
 * @LastEditors: zzb
 * @LastEditTime: 2022-12-10 14:00:03
-->
<template>
  <div class="waterMark-container">
    <div class="content-wrap" v-show="showSearch" v-if="false">
      <el-form :model="queryParams" size="mini" ref="queryForm" :inline="true">
        <el-form-item label="文件名称" prop="roleName">
          <el-input
            v-model="queryParams.roleName"
            placeholder="请输入文件名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="10" class="m0 p0 grid-content">
      <el-col :span="1.5">
        <el-button
          size="mini"
          type="primary"
          plain
          icon="el-icon-plus"
          @click="handleAdd"
          v-hasPermi="['image:watermark:edit']"
          >新增水印</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
          v-hasPermi="['system:role:remove']"
          v-if="false"
          >删除</el-button
        >
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="waterMarkList">
      <el-table-column type="index" width="55" align="center" label="序号">
      </el-table-column>
      <el-table-column
        label="水印文本"
        prop="text"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column label="文字颜色" prop="color" width="100">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row.color"
            placement="bottom"
          >
            <div
              class="color-item"
              :style="{ 'background-color': scope.row.color }"
            ></div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" prop="time" width="170" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['image:watermark:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['image:gallery:remove']"
            v-if="false"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="open"
      width="780px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属站点" prop="siteAlias">
              <el-select v-model="form.siteAlias" placeholder="请选择">
                <el-option
                  v-for="item in siteList"
                  :key="item.siteId"
                  :label="item.name"
                  :value="item.alias"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用范围" prop="scopeOfUse">
              <el-select v-model="form.scopeOfUse" placeholder="请选择">
                <el-option
                  v-for="dict in scopeOfUseOption"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水印状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in statusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                  >{{ dict.dictLabel }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="文本颜色" prop="color">
              <div class="color-container">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item"
                  placement="bottom"
                  v-for="(item, k) in predefineColors"
                  :key="k"
                >
                  <div
                    class="color-item"
                    :class="{ activeColor: form.color == item }"
                    :style="{ 'background-color': item }"
                    @click="form.color = item"
                  ></div>
                </el-tooltip>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="水印文字" prop="text">
              <el-input v-model="form.text" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="cancel">取 消</el-button> -->
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listWatermark, addWatermark } from "@/api/file/index";
export default {
  props: {
    siteList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  name: "File",
  data() {
    return {
      // 上传图片时 选择的 站点别名
      siteAlias: "",
      loading: false,
      //upload 的文件列表
      fileList: [],
      waterMarkList: [],
      rules: {
        siteAlias: [
          { required: true, message: "所属站点不能为空", trigger: "blur" },
        ],
        color: [
          { required: true, message: "文本颜色不能为空", trigger: "blur" },
        ],
        scopeOfUse: [
          { required: true, message: "使用范围不能为空", trigger: "blur" },
        ],
        text: [
          { required: true, message: "水印文字不能为空", trigger: "blur" },
        ],
      },
      // 列表数量
      total: 0,
      //是否搜索
      showSearch: true,
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      form: {
        color: "",
        status: "1",
      },
      //预定义颜色
      predefineColors: [
        "red",
        "white",
        "lightGray",
        "gray",
        "darkGray",
        "black",
        "pink",
        "orange",
        "yellow",
        "green",
        "magenta",
        "blue",
        "cyan",
      ],

      scopeOfUseOption: [],
      statusOptions: [],
    };
  },
  computed: {},
  created() {
    this.getList();
    this.getDicts("file_water_mark").then((response) => {
      this.scopeOfUseOption = response.data;
    });
    this.getDicts("sys_normal_disable").then((response) => {
      this.statusOptions = response.data;
    });
  },
  methods: {
    /** 获取文件列表 */
    getList() {
      this.loading = true;
      listWatermark(this.queryParams).then((res) => {
        this.waterMarkList = res.data;
        this.loading = false;
      });
    },

    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          pictureRemove(row.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleQuery() {
      this.getList();
    },
    handleAdd() {
      this.title = "新增水印";
      this.open = true;
      this.form = {};
      this.reset();
    },
    handleUpdate(row) {
      this.reset();
      row.scopeOfUse += "";
      row.status += "";
      this.form = row;
      this.title = "修改水印";
      this.open = true;
    },
    // 确认上传
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addWatermark(this.form).then((res) => {
            this.open = false;
            this.getList();
            this.siteAlias = "";
            this.fileList = [];
            let msg;

            msg = this.form.id ? "修改成功" : "新增成功";
            this.$message({
              type: "success",
              message: msg,
            });
          });
        }
      });
    },
    cancel() {},
    // 表单重置
    reset() {
      this.form = {
        siteAlias: undefined,
        scopeOfUse: undefined,
        color: undefined,
        status: "1",
        text: undefined,
      };
      this.resetForm("form");
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    siteFormat(row) {
      return this.selectDictLabel(
        this.siteList,
        row.siteAlias,
        "alias",
        "name"
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.color-container {
  display: flex;
}
.color-item {
  margin: 0 0 8px 8px;
  padding-bottom: 4px;
  cursor: pointer;
  width: 24px;
  height: 24px;
}
.color-item.activeColor {
  position: relative;
  &::after {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: -4px;
    left: 0;
    border-bottom: 2px solid seagreen;
  }
}
</style>
